Home Explore Help
Register Sign In
jamesperet
/
velvet-design
Watch 1
Star 0
Fork 0

Browse Source
Start page layout in progress

jamesperet 9 years ago
parent
5aa6acf040
commit
0e24a8731f
7 changed files with 200 additions and 28 deletions
Show Diff Stats
  1. BIN
      app/assets/images/header.jpg
  2. 19 0
      app/assets/javascripts/start.js
  3. 0 3
      app/assets/javascripts/start.js.coffee
  4. 35 0
      app/assets/stylesheets/start.css.less
  5. 2 0
      app/controllers/start_controller.rb
  6. 73 0
      app/views/layouts/velvet_layout.html.erb
  7. 71 25
      app/views/start/index.html.erb

BIN
app/assets/images/header.jpg
View File


+ 19 - 0
app/assets/javascripts/start.js
View File 

@@ -0,0 +1,19 @@
1 
+// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
2 
+$( document ).ready(function() {
3 
+	var mainbottom = $('#myCarousel').offset().top + $('#myCarousel').height();
4 
+
5 
+
6 
+	// on scroll,
7 
+	$(window).on('scroll',function(){
8 
+
9 
+	    // we round here to reduce a little workload
10 
+	    stop = Math.round($(window).scrollTop());
11 
+	    if (stop > mainbottom) {
12 
+	        $('.navbar-inner').addClass('past-main');
13 
+	    } else {
14 
+	        $('.navbar-inner').removeClass('past-main');
15 
+	   }
16 
+
17 
+	});
18 
+
19 
+});

+ 0 - 3
app/assets/javascripts/start.js.coffee
View File 

@@ -1,3 +0,0 @@
1 
-# Place all the behaviors and hooks related to the matching controller here.
2 
-# All this logic will automatically be available in application.js.
3 
-# You can use CoffeeScript in this file: http://coffeescript.org/

+ 35 - 0
app/assets/stylesheets/start.css.less
View File 

@@ -1,3 +1,38 @@
1 1 
 // Place all the styles related to the start controller here.
2 2 
 // They will automatically be included in application.css.
3 3 
 // You can use Less here: http://lesscss.org/
4 
+
5 
+.navbar-inner {
6 
+    background-color :transparent;
7 
+    color: white;
8 
+    transition: all 0.25s ease;
9 
+    border: none;
10 
+    text-shadow: 0 0 0 #ffffff;
11 
+    /* make sure to add vendor prefixes here */
12 
+}
13 
+
14 
+.navbar .nav > li > a {
15 
+	text-shadow: 0 0 0 #ffffff;
16 
+	color: white;
17 
+}
18 
+
19 
+.navbar .nav > li > a:hover {
20 
+	text-shadow: 0 0 0 #ffffff;
21 
+	color: white;
22 
+	text-decoration: underline;
23 
+}
24 
+
25 
+.navbar-inner.past-main {
26 
+    background-color:#fff;
27 
+    color:#444;
28 
+}
29 
+
30 
+#main {
31 
+  height:500px;
32 
+  background-color:red;
33 
+}
34 
+
35 
+#below-main {
36 
+  height:1000px;
37 
+  background-color:#eee;
38 
+}

+ 2 - 0
app/controllers/start_controller.rb
View File 

@@ -1,5 +1,7 @@
1 1 
 class StartController < ApplicationController
2 2
3 
+  layout 'velvet_layout'
4 
+
3 5 
   def index
4 6 
     @blog_posts = BlogPost.order('created_at DESC').take(4)
5 7 
   end

+ 73 - 0
app/views/layouts/velvet_layout.html.erb
View File 

@@ -0,0 +1,73 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
+    <title><%= content_for?(:title) ? yield(:title) : "RailsWebsiteTemplate" %></title>
8 
+    <%= csrf_meta_tags %>
9 
+
10 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
11 
+    <!--[if lt IE 9]>
12 
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
13 
+    <![endif]-->
14 
+
15 
+    <%= stylesheet_link_tag "application", :media => "all" %>
16 
+
17 
+    <!-- For third-generation iPad with high-resolution Retina display: -->
18 
+    <!-- Size should be 144 x 144 pixels -->
19 
+    <%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
20 
+
21 
+    <!-- For iPhone with high-resolution Retina display: -->
22 
+    <!-- Size should be 114 x 114 pixels -->
23 
+    <%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
24 
+
25 
+    <!-- For first- and second-generation iPad: -->
26 
+    <!-- Size should be 72 x 72 pixels -->
27 
+    <%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
28 
+
29 
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
30 
+    <!-- Size should be 57 x 57 pixels -->
31 
+    <%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
32 
+
33 
+    <!-- For all other devices -->
34 
+    <!-- Size should be 32 x 32 pixels -->
35 
+    <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
36 
+
37 
+    <%= javascript_include_tag "application" %>
38 
+  </head>
39 
+  <body>
40 
+
41 
+    <div class="navbar navbar-fixed-top">
42 
+      <div class="navbar-inner">
43 
+        <div class="container">
44 
+          <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
45 
+            <span class="icon-bar"></span>
46 
+            <span class="icon-bar"></span>
47 
+            <span class="icon-bar"></span>
48 
+          </a>
49 
+          <a class="brand" href="#">RailsWebsiteTemplate</a>
50 
+          <div class="container nav-collapse">
51 
+            <ul class="nav">
52 
+              <li><%= link_to "Link1", "/path1"  %></li>
53 
+              <li><%= link_to "Link2", "/path2"  %></li>
54 
+              <li><%= link_to "Link3", "/path3"  %></li>
55 
+            </ul>
56 
+          </div><!--/.nav-collapse -->
57 
+        </div>
58 
+      </div>
59 
+    </div>
60 
+
61 
+    <div>
62 
+
63 
+            <%= bootstrap_flash %>
64 
+            <%= yield %>
65 
+
66 
+	<div class="container">
67 
+	      <%= render 'layouts/footer' %>
68 
+	</div>
69 
+
70 
+    </div> <!-- /container -->
71 
+
72 
+  </body>
73 
+</html>

+ 71 - 25
app/views/start/index.html.erb
View File 

@@ -1,27 +1,73 @@
1 
-<div class="hero-unit">
2 
-  <h1><%= @config.website_name %></h1>
3 
-  <p><%= @config.tagline %></p>
4 
-</div>
1 
+<!-- Carousel
2 
+================================================== -->
3 
+<div id="myCarousel" class="carousel slide" data-ride="carousel" style="height: 400px">
4 
+ <!-- Indicators -->
5 
+	 <ol class="carousel-indicators">
6 
+	   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
7 
+	   <li data-target="#myCarousel" data-slide-to="1" class=""></li>
8 
+	   <li data-target="#myCarousel" data-slide-to="2" class=""></li>
9 
+	 </ol>
10 
+	 <div class="carousel-inner" role="listbox">
11 
+	   <div class="item active">
12 
+	     <%= image_tag "header.jpg", style: 'width: 100%;' %>
13 
+	     <div class="container">
14 
+	       <div class="carousel-caption">
15 
+	         <h1><%= @config.website_name %></h1>
16 
+	         <p><%= @config.tagline %></p>
17 
+	      </div>
18 
+          </div>
19 
+	  </div>
20 
+</div><!-- /.carousel -->
5 21
6 
-<div class="page-header">
7 
-  <h1><%= t 'blog.latest_posts'%> <%= link_to (t 'blog.more_posts'), blog_path, class: 'btn btn-large pull-right' %></h1>
8 
-</div>
22 
+<div class="container" style="margin-top: 30px;">
23 
+	<div class="row">
24 
+		<div class="span12">
25 
+
26 
+			<div class="page-header">
27 
+			  <h1><%= t 'blog.latest_posts'%> <%= link_to (t 'blog.more_posts'), blog_path, class: 'btn btn-large pull-right' %></h1>
28 
+			</div>
29 
+
30 
+			<ul class="thumbnails">
31 
+			    <% @blog_posts.each do |post| %>
32 
+				   <li class="span3">
33 
+				     <div class="thumbnail" style="height: 300px;">
34 
+					  <% if post.image.file != nil %>
35 
+					  	<%= image_tag post.image.thumb.to_s %>
36 
+					  <% else %>
37 
+				       	<img src="http://placehold.it/300x200" alt="">
38 
+					  <% end %>
39 
+				       <h3><%= link_to post.title, post_path(post) %></h3>
40 
+				       <p><%= post.description %></p>
41 
+				     </div>
42 
+				   </li>
43 
+			    <% end %>
44 
+			</ul>
45 
+
46 
+			<div class="page-header">
47 
+			  <h1>Sobre</h1>
48 
+			</div>
49 
+
50 
+			<p>Em tempos de conexões, como o nosso, em que as informações chegam à velocidade da luz aos quatro cantos do mundo e que as trocas se intensificam,  irradiando em múltiplos focos, a comunicação deixa de ser matéria exclusiva de um ou dois campos do conhecimento para se tornar plataforma colaborativa entre diversas linguagens.</p>
51 
+
52 
+			<p>E, na medida em que a esfera digital se configura como um hub, por onde passam todas as formas de criação, ela coloca novos desafios para a criação, tanto no plano bidimensional quanto no tridimensional - que tende a se tornar cada vez mais experiêncial.</p>
53 
+
54 
+			<p>A Velvet Design nasce de um profundo afinamento com as dinâmicas da comunicação de nossa época  e, ao mesmo tempo,  da convergência entre duas trajetórias no campo da criação.</p>
9 55
10 
-<ul class="thumbnails">
11 
-    <% @blog_posts.each do |post| %>
12 
-	   <li class="span3">
13 
-	     <div class="thumbnail" style="height: 300px;">
14 
-		  <% if post.image.file != nil %>
15 
-		  	<%= image_tag post.image.thumb.to_s %>
16 
-		  <% else %>
17 
-	       	<img src="http://placehold.it/300x200" alt="">
18 
-		  <% end %>
19 
-	       <h3><%= link_to post.title, post_path(post) %></h3>
20 
-	       <p><%= post.description %></p>
21 
-	     </div>
22 
-	   </li>
23 
-    <% end %>
24 
-</ul>
25 
-
26 
-
27 
-<br>
56 
+			<p>Por um lado, da experiência de anos de trabalho com cenografia e design gráfico, de Roberta Queiroz. Por outro, do percurso consolidado na pintura, nacional e internacionalmente, do artista plástico André Poli. Dessa parceria entre linguagens e da afinidade com o propósito de uma atuação multidisciplinar, surge a Velvet em 2006, com a meta de desenvolver projetos, em diferentes escalas e suportes, que respondam às necessidades específicas de cada cliente.</p>
57 
+
58 
+			<p>Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p>
59 
+
60 
+			<p>Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas  - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p>
61 
+
62 
+			<p>Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p>
63 
+
64 
+			<div class="page-header">
65 
+			  <h1>Contato</h1>
66 
+			</div>
67 
+
68 
+
69 
+
70 
+			<br>
71 
+		</div>
72 
+	</div>
73 
+</div>